<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="numericQtyMsg" value="%{getText('error.numeric.required', {getText('field.quantity')})}" />
<style>
<!--
.table-wrapper {
	max-width: 100%;
	overflow-x: auto;
	width: 100%;
}

.table-items {
	width: 100%;
}

div#price-quantity-div {
	width: auto;
	float: right;
	margin-left: 0;
	line-height: 1.2em;
}

div#scanned-product-div {
	float: left;
	position: relative;
	height: 45px;
	width: 800px;
	white-space: nowrap;
}

div#invoice-div {
	width: 800px;
	border: medium;
}

#selected-product-name {
	max-width: 450px;
	float: left;
	line-height: 1.2em;
	top: 0;
	bottom: 0;
	margin: auto;
}

#price-description {
	margin: auto;
	top: 0;
	float: left;
}
-->
</style>
<script type="text/javascript">
  $(function() {
    $('#invoice-message-div').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $('#invoice-div .date-picker').datepicker({
      defaultDate : new Date(),
      dateFormat : 'dd-M-yy',
      disabled: true
    });
    $('#invoice-div .date-picker').datepicker("setDate", "+0");
    $('#invoice-button-div').addClass('ui-dialog-buttonset');
    $('#invoice-div .submit-button').button();
    $('#invoice-div .spinner').css('width','30px').spinner({
      min : 1,
      max : 100
    }).spinner('value',1);
    $('#salesInvoiceProductBtn').click(
        function() {
          $('#product-item-search-div').load(
              'inventory/productAttribute/viewProductItemSearch.action');
        });
    $('#salesInvoiceClearBtn').click(function() {
      $('#selected-product-name').empty();
      $('#selectedSalesProductId').val('');
    });
    $('#salesInvoiceDetailAdd')
        .button({
          icons : {
            primary : "ui-icon-plusthick"
          },
          text : false
        })
        .click(
            function() {
              var msgEl = $('#invoice-message-div');
              var productId = $('#invoice-div #selectedSalesProductId').val();
              var invoiceDateEl = $('#invoice-div #invoiceDatePicker');
              var invoiceDate = invoiceDateEl.val();
              var salesInvoiceQtyEl = $('#invoice-div #salesInvoiceQty');
              var salesInvoiceQty = salesInvoiceQtyEl.spinner('value');
              var msg = '';
              try {
                invoiceDate = jQuery.datepicker.parseDate('dd-M-yy',invoiceDate,null);
              } catch (e) {
                invoiceDate = null;
              }
              if (salesInvoiceQty === '' || !$.isNumeric(salesInvoiceQty)) {
                msg = '<s:property value="#numericQtyMsg"/>';
                salesInvoiceQtyEl.focus();
              } else if (parseFloat(salesInvoiceQty) <= 0) {
                msg = '<s:property value="%{getText(\'error.greaterThan\', {getText(\'field.quantity\'), 0})}"/>';
                salesInvoiceQtyEl.focus();
              } else if (productId == '') {
                msg = '<s:property value="%{getText(\'error.required\', {getText(\'field.product.name\')})}"/>';
                $('#salesInvoiceProductBtn').focus();
              } else if (invoiceDate == null) {
                msg = '<s:property value="%{getText(\'error.required\', {getText(\'field.price.date\')})}"/>';
                invoiceDateEl.focus();
              }
              if ($.trim(msg) != '') {
                msgEl.attr('title',msg).tooltip('open');
                setTimeout(function() {
                  msgEl.tooltip("close").attr("title","");
                },1500);
                return;
              }
              var data = {};
              data['priceLookup.productAttribute.id'] = productId;
              data['priceLookup.priceItemDate'] = $.datepicker.formatDate("mm/dd/y",invoiceDate);
              jQuery
                  .ajax({
                    url : '${pageContext.request.contextPath}/inventory/productAttribute/lookupProductItemPrice.action',
                    dataType : 'json',
                    cache : true,
                    async : false,
                    data : data,
                    success : function(data) {
                      var status = data.status;
                      if (status == 'SUCCESS') {
                        var result = data.productAttribute;
                        console.log(result);
                      } else if (status == 'ERROR') {
                        msg = '';
                        if (data.errors) {
                          var errors = data.errors;
                          for ( var i = 0; i < errors.length; i++) {
                            msg += errors[i];
                            if (i < errors.length - 1) {
                              msg += ', ';
                            }
                          }
                        }
                        if ($.trim(msg) != '') {
                          msgEl.attr('title',msg).tooltip('open');
                          setTimeout(function() {
                            msgEl.tooltip("close").attr("title","");
                          },1500);
                          return;
                        }
                      }
                    }
                  });
            });
  });
</script>
<div id="invoice-div">
  <div id="invoice-message-div"></div>
  <div id="products-container-div">
    <button class="submit-button" id="salesInvoiceProductBtn">
      <s:property value="getText('title.product')" />
    </button>
    <button class="submit-button" id="salesInvoiceClearBtn">
      <s:property value="getText('button.reset')" />
    </button>
    <input type="text" id="invoiceDatePicker" class="date-picker" />
    <div id="product-item-search-div"></div>
  </div>
  <div id="scanned-product-div">
    <div id="product-info-div">
      <h3 id="selected-product-name"></h3>
      <input type="hidden" id="selectedSalesProductId" />
    </div>
    <div id="price-quantity-div">
      <input id="salesInvoiceQty" name="salesInvoiceQty" class="spinner" />
      <button id="salesInvoiceDetailAdd">
        <s:property value="getText('button.add')" />
      </button>
    </div>
  </div>
  <div id="sales-items-container">
    <div class="table-wrapper">
      <table id="table-items" class="ui-widget ui-widget-content table-items">
        <tbody>
          <tr>
            <td class="quantity">1</td>
            <td class="uom">PCS</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="invoice-button-div">
    <button class="submit-button">
      <s:property value="getText('button.ok')" />
    </button>
    <button class="submit-button">
      <s:property value="getText('button.cancel')" />
    </button>
  </div>
</div>